<template>
  <view>
    <nav-bar title="康复器材详情" backgroundColor="#115BAA" titleColor="#FFF"></nav-bar>
    <scroll-view scroll-y :style="{ height: scrollHeight }">
      <view class="img-box">
        <image
          class="img"
          :src="orthosesDetail.deviceImg || baseImgUrl + '/userImg/img_service_big.png'"
          mode="aspectFill"
        />
      </view>
      <view class="content-box">
        <view class="name ellipsis-text">{{ orthosesDetail.deviceName || '--' }}</view>
        <view class="desc-box">
          <view v-if="showAllDesc" class="desc-rich">
            <rich-text class="text" :nodes="orthosesDetail.richDeviceDesc"></rich-text>
          </view>
          <view v-else class="desc">
            <rich-text class="ellipsis-desc" :nodes="orthosesDetail.deviceDesc"></rich-text>
          </view>
          <view class="desc-text" @click="showAllDesc = !showAllDesc">
            {{ showAllDesc ? '收起' : '展开' }}
          </view>
        </view>
        <view class="price-box">
          <view class="price">￥{{ orthosesDetail.price || '--' }}</view>
          <!-- <view class="postage">邮费 ￥{{ orthosesDetail.postage }}</view> -->
        </view>
      </view>
      <view class="img-txt-detail">
        <view class="title">-下拉查看图文详情-</view>
        <view class="detail-box">
          <rich-text class="text" :nodes="orthosesDetail.deviceText || ''"></rich-text>
        </view>
        <view class="detail-item">
          <image
            v-for="(item, index) in orthosesImgs"
            class="detail-img"
            :key="index"
            :src="item"
            mode="aspectFill"
          />
        </view>
      </view>
    </scroll-view>
    <view class="form_bottom_btn">
      <view class="btn-box">
        <view class="confirm" @click="clickBuy">立即购买</view>
      </view>
    </view>
  </view>
</template>

<script>
  import api_orthoses from '@/api/user.js'
  import { baseUrl, baseImgUrl } from '@/config'
  export default {
    name: 'OrthosesDetail',
    data() {
      return {
        baseUrl,
        baseImgUrl,
        scrollHeight: '',
        orthosesDetail: {},
        orthosesImgs: [],
        id: null,
        showAllDesc: false
      }
    },
    onLoad(options) {
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 64 + 'px'
      this.id = Number(options.id) || ""
      this.getOrthosesDetail()
    },
    methods: {
      getOrthosesDetail() {
        api_orthoses.deviceDetail(this.id).then(res => {
          const result = res.data
          result.richDeviceDesc = result.deviceDesc && result.deviceDesc.replace(/\n/g, '<br/>')
          const imgContent = result.deviceText && result.deviceText.includes('<img') ? result.deviceText.replace(/\<img/g, '<img style="width: 100%;height: auto"') : result.deviceText
          result.deviceText = imgContent && imgContent.replace(/\n/g, '<br/>')
          this.orthosesDetail = result
          const deviceImg = this.orthosesDetail.deviceImg
          this.orthosesDetail.deviceImg = deviceImg && deviceImg.includes('http') ? deviceImg : this.baseUrl + deviceImg
          const deviceDetailImg = this.orthosesDetail.deviceDetailImg
          this.orthosesImgs = deviceDetailImg ? deviceDetailImg.split(',').map(item => {
            return item && item.includes('http') ? item : this.baseUrl + item
          }) : []
        })
      },
      clickBuy() {
        uni.setStorageSync('orthosesDetail',{ ...this.orthosesDetail, totalNum: 1 } )
        uni.navigateTo({
          url: `/subPages/userIndex/rehabilitationAids/orderConfirm`
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 750rpx;
    height: 750rpx;
    border-radius: 16rpx;
    background-color: #FFF;
    .img {
      width: 638rpx;
      height: 508rpx;
      border-radius: 16rpx;
    }
  }
  .content-box {
    margin: 30rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    background-color: #FFF;
    .name {
      font-size: 32rpx;
      font-weight: 500;
      color: #000;
    }
    .desc-box {
      display: flex;
      margin: 30rpx 0;
      font-size: 24rpx;
      .desc {
        flex: 1;
        color: #808080;
      }
      .desc-rich {
        flex: 1;
      }
      .ellipsis-desc {
        display: -webkit-box; /* 使用弹性盒子布局 */
        -webkit-line-clamp: 1; /* 最多显示1行文本 */
        -webkit-box-orient: vertical; /* 垂直方向排列 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 显示省略号 */
      }
    }
    .price-box {
      display: flex;
      align-items: center;
      .price {
        font-size: 36rpx;
        font-weight: 700;
        color: #FF513A;
      }
      .postage {
        margin-left: 10rpx;
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  .img-txt-detail {
    margin: 0 30rpx;
    padding: 0 25rpx 20rpx;
    border-radius: 16rpx;
    background-color: #FFF;
    .title {
      padding: 28rpx 0 38rpx;
      text-align: center;
      font-size: 24rpx;
      color: #999;
    }
    .detail-item {
      width: 100vw;
      .detail-img {
        // width: 100%;
      }
    }
  }
  .detail-box {
    margin-bottom: 20rpx;
  }
</style>
